import { SvgIcon } from '@/components/icon';
import { Tooltip } from 'antd';
import dayjs from 'dayjs';
import { CustomRangePicker } from '@/components/eai-design/date-picker';
interface Props {
  handleDateChange: (data: any) => void;
  handleQuickSelect: (range: number, activeRange: string) => void;
  dateRange: [dayjs.Dayjs, dayjs.Dayjs];
  activeRange: string;
  showCount: { userCount: number; sessionCount: number; questionCount: number };
  tooltipMap: { [key: string]: string };
}

const ReportHeader = ({
  handleDateChange,
  handleQuickSelect,
  dateRange,
  activeRange,
  showCount,
  tooltipMap,
}: Props) => {
  return (
    <div className="mb-2 flex h-[56px]  items-center justify-between rounded-default  px-4">
      <div className="flex h-full items-center   ">
        <div className="mr-10 flex items-center">
          <div className="mr-3 flex h-[48px] w-[48px] items-center justify-center rounded-default bg-white ">
            <SvgIcon size={24} icon="reportline1" className="ml-1" />
          </div>
          <div>
            <div className="flex items-center text-xs text-text-3">
              用户总数
              <Tooltip title={tooltipMap['userTotal']}>
                <div className="flex">
                  <SvgIcon size={16} icon="report-is1" className="ml-1" />
                </div>
              </Tooltip>
            </div>
            <div className="text-text-3">
              <span className="mr-1 text-xl font-extrabold  text-text-5">
                {showCount.userCount}
              </span>
              人
            </div>
          </div>
        </div>
        <div className="mr-10 flex items-center">
          <div className="mr-3 flex h-[48px] w-[48px] items-center justify-center rounded-default bg-white ">
            <SvgIcon size={24} icon="reportline4" className="ml-1" />
          </div>
          <div>
            <div className="flex items-center text-xs text-text-3">
              会话总数
              <Tooltip title={tooltipMap['sessionCount']}>
                <div className="flex">
                  <SvgIcon size={16} icon="report-is1" className="ml-1" />
                </div>
              </Tooltip>
            </div>
            <div className="text-text-3">
              <span className="mr-1 text-xl font-extrabold  text-text-5">
                {showCount.sessionCount}
              </span>
              个
            </div>
          </div>
        </div>
        <div className="mr-10 flex items-center">
          <div className="mr-3 flex h-[48px] w-[48px] items-center justify-center rounded-default bg-white ">
            <SvgIcon size={24} icon="reportline5" className="ml-1" />
          </div>
          <div>
            <div className="flex items-center text-xs text-text-3">
              对话总数
              <Tooltip title={tooltipMap['questionCount']}>
                <div className="flex">
                  <SvgIcon size={16} icon="report-is1" className="ml-1" />
                </div>
              </Tooltip>
            </div>
            <div className="text-text-3">
              <span className="mr-1 text-xl font-extrabold text-text-5">
                {showCount.questionCount}
              </span>
              条
            </div>
          </div>
        </div>
      </div>
      <div className="flex items-center justify-center">
        <div className="mr-3 flex h-8 w-[188px] cursor-pointer items-center justify-center rounded-md border border-line-2 bg-white p-1 text-text-4">
          <div
            className={`w-1/2   text-center ${
              activeRange === '7days' ? 'rounded bg-fill-1 font-semibold text-[#1E6FFA] ' : ''
            }`}
            onClick={() => handleQuickSelect(7, '7days')}
          >
            近七天
          </div>
          <div
            className={` w-1/2  text-center ${
              activeRange === '30days' ? 'rounded bg-fill-1 font-semibold text-[#1E6FFA] ' : ''
            }`}
            onClick={() => handleQuickSelect(30, '30days')}
          >
            近一月
          </div>
        </div>
        <CustomRangePicker
          className="h-[32px] !border-line-2"
          value={dateRange}
          onChange={handleDateChange}
        />
      </div>
    </div>
  );
};
export default ReportHeader;
